<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    class="ModalStyle"
  >
    <a-form :form="form">
      <div class="left">
        <a-form-item style="display:none">
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="车辆品牌"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.carBrand }}</span>
          <a-input
            v-else
            placeholder="车辆品牌"
            v-decorator="['carBrand', {rules: [{required: true, message: '请输入车辆品牌'}]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="事业部"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.division }}</span>
          <a-input
            v-else
            placeholder="事业部"
            v-decorator="['division', {rules: [{required: true, message: '请输入事业部'}]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="品牌分类"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.brandClassify }}</span>
          <a-input
            v-else
            placeholder="品牌分类"
            v-decorator="['brandClassify', {rules: [{required: true, message: '请输入品牌分类'}]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="经销店名称"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.dealerName }}</span>
          <a-input
            v-else
            placeholder="经销店名称"
            v-decorator="['dealerName', {rules: [{required: true, message: '请输入经销店名称'}]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="区域"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.area }}</span>
          <a-input
            v-else
            placeholder="区域"
            v-decorator="['area']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="机构编码"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.organCode }}</span>
          <a-input
            v-else
            placeholder="机构编码"
            v-decorator="['organCode']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="统一社会代码"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.unifiedSocialCode }}</span>
          <a-input
            v-else
            placeholder="统一社会代码"
            v-decorator="['unifiedSocialCode']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="经销店地址"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.dealerAddress }}</span>
          <a-input
            v-else
            placeholder="经销店地址"
            v-decorator="['dealerAddress', {rules: [{required: true, message: '请输入经销店地址'}]}]"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="投保账号"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.insuranceAccountno }}</span>
          <a-input
            v-else
            placeholder="投保账号"
            v-decorator="['insuranceAccountno']"
          />
        </a-form-item>
      </div>
      <div class="right">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="协赔账号"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.xiepeiAccountno }}</span>
          <a-input
            v-else
            placeholder="协赔账号"
            v-decorator="['xiepeiAccountno']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="店总账号"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.storemanagerAccountno }}</span>
          <a-input
            v-else
            placeholder="店总账号"
            v-decorator="['storemanagerAccountno']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="密码"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.password }}</span>
          <a-input
            v-else
            placeholder="密码"
            v-decorator="['password']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="收款账号"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.collectionAccountno }}</span>
          <a-input
            v-else
            placeholder="收款账号"
            v-decorator="['collectionAccountno']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="开户行名称"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.openingbankName }}</span>
          <a-input
            v-else
            placeholder="开户行名称"
            v-decorator="['openingbankName']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="税号"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.dutyParagraph }}</span>
          <a-input
            v-else
            placeholder="税号"
            v-decorator="['dutyParagraph']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="协赔员姓名"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.xiepeiName }}</span>
          <a-input
            v-else
            placeholder="协赔员姓名"
            v-decorator="['xiepeiName']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证"
        >
          <span
            class="title"
            v-if="disabled"
          >{{ mdl.idCard }}</span>
          <a-input
            v-else
            placeholder="身份证"
            v-decorator="['idCard']"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机号"
        >
          <span
            class="iphone"
            v-if="disabled"
          >{{ mdl.idCard }}</span>
          <a-input
            v-else
            placeholder="手机号"
            v-decorator="['iphone']"
          />
        </a-form-item>
      </div>

    </a-form>
  </a-modal>
</template>
<script>
import { saveSysDealerInfo } from '@/api/system'
import pick from 'lodash.pick'
export default {
  name: 'SysDealerInfoModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 9 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      disabled: false
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add () {
      this.disabled = false
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    edit (record) {
      this.disabled = false
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'organization', 'remark', 'updateTime', 'updateBy', 'createTime', 'createBy', 'status', 'iphone', 'idCard', 'xiepeiName', 'dutyParagraph', 'openingbankName', 'collectionAccountno', 'password', 'storemanagerAccountno', 'xiepeiAccountno', 'insuranceAccountno', 'dealerAddress', 'unifiedSocialCode', 'organCode', 'area', 'dealerName', 'brandClassify', 'division', 'carBrand', 'id'))
      })
    },
    preview (record) {
      this.disabled = true
      this.mdl = Object.assign(record)
      this.visible = true
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveSysDealerInfo(values).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style lang='less' scoped>
.left {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
}
.right {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
}
// .ModalStyle
.ant-modal .ant-row {
  height: 18px;
}
</style>
